<html>
<head>
<title>Example 1</title>
<style type="text/css">
<!--
a img {height: 20px; width: 32px; border-width: 0; background: top left no-repeat;}

a#w3c img {background-image: url(../../img/eye.gif);}
/*a#w3c:visited img {background-image: url(img/w3c-seenit.gif);}*/
a#w3c:hover img {background-image: url(../../img/eye_sel.gif);}
/*a#w3c:active img {background-image: url(img/w3c-click.gif);}*/
-->
</style>
</head>
<body>

<p>
The following links should take on hover, active, and visited states.  The markup has been kept as simple as possible for easy study.
The CSS is a little different than that presented in the article, but the effect is exactly the same.  It's just been rearranged to take advantage of the cascade, and thus impart more clarity.
</p>
<hr>

<div id="navbar">
<a id="w3c" href="#"><img src="img/blank.gif" ></a>
</div>

</body>
</html>
